import { ActionType, ProColumns, ProFormSelect, ProTable } from '@ant-design/pro-components';
import { useAccess } from 'umi';
import { Radio, RadioChangeEvent } from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import moment from 'moment';
import React, { useRef, useState } from 'react';
import { assessAnalysisOverview } from '@/services/api/api-assess-analysis';
import ReportDetial from '../report/ReportDetial';
import ProList from '@ant-design/pro-list';

interface TableOverviewProps { }
/**
 * 根据 季度 获取 时间范围
 * @param quarter 根据
 * @returns
 */
const getQuarterDates = (quarter: number): Array<string> => {
  const year = dayjs().year();
  let queryReleaseTimes = new Array();

  if (quarter == 1) {
    queryReleaseTimes.push(year + '-01-01');
    queryReleaseTimes.push(year + '-03-31');
  } else if (quarter == 2) {
    queryReleaseTimes.push(year + '-04-01');
    queryReleaseTimes.push(year + '-06-30');
  } else if (quarter == 3) {
    queryReleaseTimes.push(year + '-07-01');
    queryReleaseTimes.push(year + '-09-30');
  } else if (quarter == 4) {
    queryReleaseTimes.push(year + '-10-01');
    queryReleaseTimes.push(year + '-12-31');
  }

  return queryReleaseTimes;
};

const TableOverview: React.FC<TableOverviewProps> = ({ }) => {
  const access = useAccess();

  const actionRef = useRef<ActionType>();

  const [quarter, setQuarterState] = useState<number>(moment().quarter());

  const [releaseTimes, setReleaseTimesState] = useState<string[]>(getQuarterDates(quarter));


  const [quarterOption, setQuarterOption] = useState([
    {
      label: '第一季度', value: '1'
    },
    {
      label: '第二季度', value: '2'
    },
    {
      label: '第三季度', value: '3'
    },
    {
      label: '第四季度', value: '4'
    },
    {
      label: '第五季度', value: '5'
    }
  ])


  const columns: ProColumns<AssessAnalysisData.Overview>[] = [
    // {
    //   title: '序号',
    //   dataIndex: 'index',
    //   valueType: 'indexBorder',
    //   width: '50px',
    // },
    {
      title: '区县名称',
      dataIndex: 'areaName',
      ellipsis: true,
      width: '120px',
      align: 'center',
      render: (dom, record, _index, action) => {
        return (
          <ReportDetial
            areaId={record.areaId}
            areaName={record.areaName}
            quarter={quarter}
            releaseTimes={releaseTimes}
            onRefurbish={() => {
              actionRef.current?.reload();
            }}
          />
        );
      },
    },
    {
      title: '中央媒体量',
      dataIndex: 'releaseCentreMediaCount',
      ellipsis: true,
      width: '120px',
      align: 'center',
    },
    {
      title: '市属媒体量',
      dataIndex: 'releaseLocalMediaCount',
      ellipsis: true,
      width: '120px',
      align: 'center',
    },
    {
      title: '微信',
      dataIndex: 'disseminationPriorityRecordTripartitePlatformWxCount',
      ellipsis: true,
      width: '120px',
      align: 'center',
    },
    {
      title: '微博',
      dataIndex: 'disseminationPriorityRecordTripartitePlatformWbCount',
      ellipsis: true,
      width: '120px',
      align: 'center',
    },
    {
      title: '抖音',
      dataIndex: 'disseminationPriorityRecordTripartitePlatformDyCount',
      ellipsis: true,
      width: '120px',
      align: 'center',
    },
    {
      title: '今日头条',
      dataIndex: 'disseminationPriorityRecordTripartitePlatformJrttCount',
      ellipsis: true,
      width: '120px',
      align: 'center',
    },
    {
      title: '全国热搜',
      dataIndex: 'disseminationNationwideTophubCount',
      ellipsis: true,
      width: '120px',
      align: 'center',
    },
    {
      title: '本地热搜',
      dataIndex: 'disseminationLocalTophubCount',
      ellipsis: true,
      width: '120px',
      align: 'center',
    },
  ];

  return (
    <ProList<AssessAnalysisData.Overview>
      headerTitle={
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <span
            style={{
              marginRight: '10px',
              fontSize: 18,
              fontWeight: 'bold',
              marginTop: 5
            }}
          >
            {dayjs().year()}年
          </span>
          <ProFormSelect
            name="year"
            placeholder="选择年限"
            initialValue={moment().quarter()}
            fieldProps={{
              options: quarterOption,
              style: {
                width: 200
              },
              removeIcon: true,
              allowClear: true,
              showSearch: true,
              maxTagCount: 'responsive',

              onClear() {
                setQuarterState(moment().quarter());
                setReleaseTimesState(getQuarterDates(value));
                actionRef.current?.reloadAndRest();
              },
              onChange(value, selectOptions) {
                setQuarterState(value);
                setReleaseTimesState(getQuarterDates(value));
                actionRef.current?.reloadAndRest();
              },
            }}
          />
        </div>
      }

      style={{
        marginTop: '16px',
      }}
      cardProps={{
        bodyStyle: {
          padding: 0,
        },
      }}
      grid={{ gutter: 18, column: 1 }}
      bordered={false}
      actionRef={actionRef}
      rowKey="areaId"
      search={false}
      request={async (params = {}) => {
        const response = await assessAnalysisOverview({
          releaseTimes: releaseTimes,
          ...params,
        });
        return Promise.resolve({
          data: response.data,
          total: response.data.length,
          success: response.code === 0,
        });
      }}
      pagination={false}
      renderItem={(item: AssessAnalysisData.Overview, index: number) => {
        return (
          <ReportDetial
            item={item}
            areaId={item.areaId}
            areaName={item.areaName}
            quarter={quarter}
            releaseTimes={releaseTimes}
            onRefurbish={() => {
              actionRef.current?.reload();
            }}
          />
        );
      }}
    />
  );
};
export default TableOverview;
